<template>
	<image :src="picMap[props.type]" class="blockClass" mode="contain"
		:class="props.activeStatus?noStyle?'':props.disabled?'unactive':'active':'unactive'"
		@click="clickItem(props.activeStatus)" v-if="ENV!='develop'&&!(props.otherIndex>=0)"></image>
	<view class="blockClass" style="background-color: aliceblue;"
		:class="props.activeStatus?noStyle?'':props.disabled?'unactive':'active':'unactive'"
		v-if="ENV=='develop'&&!(props.otherIndex>=0)" @click="clickItem(props.activeStatus)">{{type}}</view>

	<image :src="picMap[props.type]" class="blockClass" mode="contain"
		:class="props.activeStatus?noStyle?'':props.disabled?'unactive':'active':'unactive'" @click="clickOtherItem"
		v-if="ENV!='develop'&&(props.otherIndex>=0)"></image>
	<view class="blockClass" style="background-color: aliceblue;"
		:class="props.activeStatus?noStyle?'':props.disabled?'unactive':'active':'unactive'"
		v-if="ENV=='develop'&&(props.otherIndex>=0)" @click="clickOtherItem">{{type}}</view>
</template>

<script setup>
	import {
		inject,
		onMounted
	} from 'vue';
	const props = defineProps({
		type: Number,
		activeStatus: {
			type: Boolean,
			default: true
		},
		col: Number,
		area: Number,
		disabled: {
			type: Boolean,
			default: false
		},
		otherIndex: {
			type: Number,
			default: -1
		},
		noStyle: {
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(["clickItem", "clickOtherItem"])
	const ENV = inject("ENV")
	let picMap = {
		0: "/static/material/iKun/image/0.jpeg",
		1: "/static/material/iKun/image/1.jpeg",
		2: "/static/material/iKun/image/2.jpeg",
		3: "/static/material/iKun/image/3.jpeg",
		4: "/static/material/iKun/image/4.jpeg",
	}
	onMounted(() => {})
	const clickItem = (bool) => {
		if (bool && !props.disabled) {
			if (props.col || props.col === 0) {
				if (props.area || props.area === 0) {
					emit("clickItem", props.col, props.area)
				} else {
					emit("clickItem", props.col)
				}
			} else {
				console.log("col传递出错")
			}
		}
	}
	const clickOtherItem = () => {
		emit("clickOtherItem", props.otherIndex)
	}
</script>

<style scoped>
	.blockClass {
		border: 1rpx solid #ccc;
		width: 60rpx;
		height: 80rpx;
		box-sizing: border-box;
		box-shadow: 1px 1px 1px 1px #ccc;
	}

	.active {
		box-shadow: 1px 2px 8px 2px #ccc;
		transform: scale(1.2)
	}

	.unactive::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		background: #5a5a5a85;
	}
</style>